<template>
  <div class="container-reader">
    <el-row>
      <!-- 新增/修改弹框 -->
      <el-dialog :title="judgeSta==1?'新增读写器':'修改读写器'"
                 :before-close="onBefCloRead"
                 :close-on-click-modal="false"
                 :visible.sync="dialogFormVisible">
        <AddAndModifyDialog :todos="todos"
                            :ontype="ontype"
                            :catchBack="catchBack"
                            :catchSave="catchSave"
                            :modifyObject="modifyObject"></AddAndModifyDialog>
      </el-dialog>

      <el-form ref="form"
               label-width="80px"
               :model="form">
        <el-col :span="24"
                class="header-box">
          <el-col :span="8"
                  :offset="12">
            <el-form-item label="设备编号">
              <el-input v-model="form.reader_no"
                        placeholder="请输入设备编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  class="header-right">
            <el-form-item>
              <el-button type="primary"
                         @click="onSearch">查询</el-button>
              <el-button type="primary"
                         @click="onAdd">添加</el-button>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#f5f5f5'}"
                    border
                    height="700"
                    style="width: 100%">
            <el-table-column prop="reader_no"
                             align="center"
                             show-overflow-tooltip
                             label="设备编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="model"
                             align="center"
                             show-overflow-tooltip
                             label="设备型号"
                             width="180">
            </el-table-column>
            <el-table-column prop="created_at"
                             align="center"
                             show-overflow-tooltip
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="project_name"
                             align="center"
                             show-overflow-tooltip
                             label="在用项目">
            </el-table-column>
            <el-table-column label="操作"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="onEdit( scope.row)">修改</el-button>
                <el-button type="text"
                           @click="onUseRecord( scope.row)">使用记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                class="footer-box">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         background
                         :page-sizes="[10]"
                         :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import AddAndModifyDialog from './Components/addAndModifyDialog'
import { readerApi } from '@/services/SystemSetting'
export default {
  components: {
    AddAndModifyDialog
  },
  data () {
    return {
      modifyObject: {},
      ontype: '',
      todos: '',
      pageSize: 10,
      total: 4,
      currentPage: 1,
      judgeSta: '', // 1：新增；2：修改;判断弹框左上角折内容是新增还是修改
      dialogFormVisible: false,
      form: {
        reader_no: ''
      },
      tableData: []
    }
  },
  methods: {
    // 点击弹框右上角的叉号触发的事件
    onBefCloRead (done) {
      this.modifyObject = {}
      // console.log('modifyObject123=====', this.modifyObject)
      done()
    },
    catchBack (val) {
      if (val == '0') {
        this.modifyObject = {}
        this.dialogFormVisible = false
      }
    },
    catchSave (val) {
      if (val == 'SUCCESS') {
        this.modifyObject = {}
        this.getReaderData()
        this.dialogFormVisible = false
      }
    },
    // 点击“查询”触发的事件
    onSearch () {
      this.currentPage = 1;
      this.getReaderData();
    },
    // 点击“添加”触发的事件
    onAdd () {
      this.ontype = '1'
      this.judgeSta = 1
      this.dialogFormVisible = true
    },
    // 触发“使用记录”事件
    onUseRecord (row) {
      this.$router.push({ path: '/useRecord', query: { bluetooth_reader_id: row.bluetooth_reader_id } })
    },
    // 触发“编辑”事件
    onEdit (row) {
      this.modifyObject = row
      //  console.log('modifyObject====', this.modifyObject)
      this.ontype = '2'
      this.judgeSta = 2
      this.dialogFormVisible = true
    },
    // 第页条数触发事件
    handleSizeChange (val) {
      this.pageSize = val
      this.getReaderData()
    },
    // 点击页码时触发的事件
    handleCurrentChange (val) {
      this.currentPage = val
      this.getReaderData()
    },
    getReaderData () {
      readerApi.getReaderData({
        params: {
          reader_no: this.form.reader_no,
          per_page: this.pageSize,
          page: this.currentPage
        }
      }).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
        //console.log('读写器', res, this.tableData)
      }).catch((error) => {

      })
    }
  },
  created () {
    this.getReaderData()
  }
}
</script>
<style lang="scss" scoped>
.footer-box {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.container-reader {
  padding: 20px !important;
  height: auto;
}
.header-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/deep/ .header-right .el-form-item__content {
  margin-left: 0px !important;
}
</style>
